<!DOCTYPE html>
<html>
<head>
    <!--Import Google Icon Font-->
    <link type="text/css" rel="stylesheet" href="css/material-icons.css"/>
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
    <title>Create Address Pool</title>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>
<body>
<div class="container">
  <div class="section">
    <div class="row">
      <div class="col m6 push-m2" id="main-panel">
        <div class="row">
          <div class="input-field col m6">
            <input type="text" id="pool-name" placeholder="Input address pool name" class="validate">
            <label for="pool-name" id="name-label"></label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col m7">
            <input type="text" id="pool-gateway" placeholder="IP of gateway" class="validate">
            <label for="pool-gateway" id="gateway-label"></label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col m7">
            <input type="text" id="pool-dns1" placeholder="IP of DNS server" class="validate">
            <label for="pool-dns1" id="dns1-label"></label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col m7">
            <input type="text" id="pool-dns2" placeholder="IP of optional DNS server" class="validate">
            <label for="pool-dns2" id="dns2-label"></label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="divider"></div>
  <div class="section">
      <div class="row">
          <div class="col m2">
              <a class="waves-effect waves-light blue-grey lighten-2 btn" onclick="window.history.back()" id="back-caption"><i
                      class="material-icons left">chevron_left</i></a>
          </div>
          <div class="col m2 right" id="button">
              <button class="waves-effect waves-light blue-grey lighten-2 btn" onclick="createPool()" id="create-caption">
                  <i class="material-icons right">add</i>
              </button>
          </div>
      </div>
  </div>
</div>

<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/nano.js"></script>
<script>
N.ValidateSession();
var texts = N.GetTexts();
$('#back-caption').append(texts.get(N.TagBack));
$('#create-caption').prepend(texts.get(N.TagCreate));

$('#name-label').text(texts.get(N.TagName));
$('#gateway-label').text(texts.get(N.TagGateway));
$('#dns1-label').text(texts.get(N.TagDNS) + '1 (*)');
$('#dns2-label').text(texts.get(N.TagDNS) + '2');

M.AutoInit();

var ipv4Pattern = new RegExp('^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$');

function createPool(){
  var poolName = $('#pool-name').val();
  var gateway = $('#pool-gateway').val();
  var dns1 = $('#pool-dns1').val();
  var dns2 = $('#pool-dns2').val();
  if (!poolName){
    M.toast({html: "please input pool name"});
    return;
  }
  if (!ipv4Pattern.test(gateway)){
    M.toast({html: "invalid gateway: " + gateway});
    return;
  }
  if (!ipv4Pattern.test(dns1)){
    M.toast({html: "invalid DNS1: " + dns1});
    return;
  }
  var dns = new Array(dns1);
  if (dns2){
    if (!ipv4Pattern.test(dns2)){
      M.toast({html: "invalid DNS2: " + dns2});
      return;
    }
    dns.push(dns2);
  }

  $('#button').empty();
  $('#main-panel').empty();

  var table = $('<table>').addClass('striped');
  table.append(
    $('<tr>').append(
      $('<td>').text(texts.get(N.TagName))
    ).append(
      $('<td>').text(poolName)
    )
  ).append(
    $('<tr>').append(
      $('<td>').text(texts.get(N.TagGateway))
    ).append(
      $('<td>').text(gateway)
    )
  ).append(
    $('<tr>').append(
      $('<td>').text(texts.get(N.TagDNS))
    ).append(
      $('<td>').text(dns.join(';'))
    )
  ).append(
    $('<tr>').append(
      $('<td>').text(texts.get(N.TagResult))
    ).append(
      $('<td>').attr('id', 'request-result')
    )
  );
  $('#main-panel').append(table);
  var request = new Object();
  request.gateway = gateway;
  request.dns = dns;

  $.post(
    '/address_pools/'+ poolName,
    JSON.stringify(request),
    function(result){
      if (0 != result['error_code']) {
        $('#request-result').text(result['message']);
        return;
      }
      $('#request-result').text('success');
      $('#button').append(
        $('<a>').attr('href', 'address_pools.html').append(
          $('<button>').addClass('waves-effect waves-light blue-grey lighten-2 btn').text(texts.get(N.TagFinish)).prepend(
            $('<i>').addClass('material-icons').text('check')
          )
        )
      );
      N.WriteOperateLog('create address pool ' + poolName);
    },
    "json"
  );

}



</script>
</body>
</html>
